<!--法律服务-->
<template>
  <div class="robot-tab-cont search-back">
    <div class="windows_body3">
      <happy-scroll
        color="rgba(0,0,0,0.2)"
        size="10"
        :resize="true"
        smaller-move-v1="start"
        bigger-move-h1="end"
        :min-length-h="20"
        hide-horizontal
      >
        <ul class="newsList">
          <li>
            <div class="answerHead">
              <img src="../../assets/images/robot.png" />
              <p>{{ robot.robotName }}</p>
            </div>
            <div class="answers">
              <div class="content-answers" style="width: 800px">
                <div class="answers-title">您好，这里是法律AI助手</div>
                <div class="answers-aiAssistant" @click="openUrl(item.url)" v-for="item in serveMap">
                  <el-tooltip
                    :content="item.tooltip"
                    effect="light"
                    placement="bottom"
                    popper-class="aiAssistant-tooltip"
                    :visible-arrow="false"
                  >
                    <div class="aiAssistant-content">
                      <img :src="item.img" alt="" /> <div class="content-title">{{ item.title }}</div></div
                    >
                  </el-tooltip>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </happy-scroll>
    </div>
  </div>
</template>
<script>
import { SERVE_MAP } from "@/utils/commonConfig";
export default {
  props: {
    robot: {
      type: Object,
      default: {
        robotName: null,
      },
    },
  },
  data() {
    return {
      serveMap: SERVE_MAP, //Ai能力模块配置
    };
  },
  methods: {
    /**
     * 打开链接
     * @param url 链接地址
     */
    openUrl(url) {
      url && window.open(url);
    },
  },
};
</script>
<style lang="less">
.aiAssistant-tooltip {
  width: auto;
  max-width: 210px;
  color: black;
  border: none !important;
  box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.5);
}
</style>
<style lang="less" scoped>
@import "@/assets/css/index.less";
@bg-color: #fff;//背景颜色
@primary-color: #0b1237;//标题颜色
@ai-assistant-bg: rgba(48, 94, 220, 0.04); //模块背景颜色
@ai-assistant-border: rgba(48, 94, 220, 0.01);//模块边框颜色

.content-answers {
  background: @bg-color;
  box-shadow:0 0 32px #0460a30a;;
  border-radius:16px;
  padding: 20px;
  position: relative;
  height: 450px;
  .flex-display(@justify: center, @align: start, @wrap: wrap, @align-content: start, @column-gap: 45px);
  .answers-title {
    width: 100%;
    margin-bottom: 12px;
    .font-style(@size: 26px, @color: @primary-color, @line-height: 42px);
  }

  .answers-aiAssistant {
    align-self: start;
    width: 300px;
    height: 110px;
    border: 2px solid @ai-assistant-border;
    background: @ai-assistant-bg;
    border-radius: 8px;
    cursor: pointer;
    padding: 10px;
    .flex-display(@justify: center, @align: center);
    .aiAssistant-content {
      .flex-display(@direction: column, @justify: center, @align: center, @row-gap: 5px);
      img {
        width: 28px;
        height: 28px;
      }

      .content-title {
        .font-style(@size: 18px, @color: black, @line-height: normal);
        .flex-display(@column-gap:10px);
      }
    }
  }
}
</style>
